<template>
	<view class="user_box">
		<view class="back_img">
			<image :src="u.backgroundUrl"></image>
		</view>
		<view class="user">
			<view><image :src="u.avatarUrl"></image></view>
			<view class="user_name">{{u.nickname}}</view>
			<view class="user_follows">
				<text>关注&nbsp;{{u.follows}}</text>
				<text style="margin-left: 25rpx;">粉丝&nbsp;{{u.followeds}}</text>
			</view>
			<view class="user_op">
				<view class="user_Vip">LV.{{u.level}}</view>
				<view class="op_box">
					<div class="bianji">编辑</div>
					<div class="change_img">更换背景</div>
				</view>
			</view>
		</view>
		<view class="info">
			<view class="nav">
				<view v-for="(item,index) in navList" :key='index' 
				:class="{active_nav: index === aIndex}" @click="switchNav(index)">
					{{item}}
				</view>
			</view>
			<!-- 信息展示 -->
			<view v-if="show">
				<view class="user_listen">
					<view class="listen">
						<view>
							<image src="../../static/img/music.jpg" mode="aspectFill"></image>
						</view>
						<view style="margin-left: 20rpx;">
							<view style="font-size: 30rpx;color: #000000;">听歌排行</view>
							<view>累计听歌{{u.listenSongs}}首</view>
						</view>
					</view>
					<view class="star_listen">
						<view>
							<image src="../../static/img/star_mus.jpg" mode="aspectFill"></image>
						</view>
						<view style="margin-left: 20rpx;">
							<view style="font-size: 30rpx;color: #000000;">我喜欢的音乐</view>
							<view>0首，播放0次</view>
						</view>
					</view>
				</view>
				<view class="paly_info">
					<view>
						<text>基本信息</text>
						<text class="title_style">(信息展示可在隐私设置修改)</text>
					</view>
					<view>
						<text class="title">村龄：</text>
						<text class="title_style">
						{{u.createDays}}天&nbsp;({{u.createTime | dateFormat()}}注册)
						</text>
					</view>
					<view>
						<text class="title">地区：</text>
						<text class="title_style">
							{{getPro}} {{getCity}}
							</text>
					</view>
				</view>
			</view>
			<!-- 动态展示 -->
			<view v-else>
				没有动态，骗你的！
			</view>
		</view>
	</view>
</template>

<script>
	import {getUserInfo,User,getUserAc} from '@/network/user.js'
	import address from '@/utils/citys'
	export default {
		data() {
			return {
				id:'',
				cookie:'',
				u:{},
				navList:['主页','动态'],
				aIndex:0,
				show:true,
				province:address[100000],
				city:address
			};
		},
		methods:{
			switchNav(index){
				this.aIndex = index
				if(index === 0){
					this.show = true
				}else {
					this.show = false
					// 获取动态
					getUserAc(this.id,this.cookie).then(res => {
						console.log(res)
						})
				}
			},
			
		},
		computed:{
			getPro(){
				return this.province[this.u.province]
			},
			getCity(){
				let cityCode = ''
				for(let item in this.city[this.u.province]){
					if(item === this.u.city.toString()){
						cityCode = this.city[this.u.province][item]	
					}
				}
				return cityCode
			}
		},
		onLoad(data) {
			this.id = data.uid
			uni.getStorage({
				key:'cookie',
				success:(res) => {
					this.cookie = res.data
				}
			})
			getUserInfo(this.id,this.cookie).then(res => {
				// console.log(res)
				this.u = new User(res.data,res.data.profile)
				// console.log(this.u)
			}
			)
		}
	}
</script>

<style lang="scss">
	.user_box{
		position: relative;
		height: calc(100vh - 80rpx);
	}
	.back_img{
		width: 100%;
		height: 500rpx;
		image{
			width: 100%;
			height: 500rpx;
		}
		
	}
	.user{
		color: #FFFFFF;
		position: absolute;
		top: 100rpx;
		width: 100%;
		height: 300rpx;
		padding: 0 30rpx;
		image{
			width: 110rpx;
			height: 110rpx;
			border-radius: 50%;
		}
		.user_name{
			font-size: 30rpx;
			margin-top: 20rpx;
		}
		.user_follows{
			margin-top: 20rpx;
			font-size: 18rpx;
		}
		.user_op{
			width: 100%;
			display: flex;
			margin-top: 20rpx;
			justify-content: space-between;
			font-size: 25rpx;
			.user_Vip{
				text-align: center;
				font-size: 18rpx;
				width: 70rpx;
				box-align: center;
				height: 25rpx;
				border-radius: 15rpx;
				font-style: italic;
				background-color: #C8C7CC;
				opacity: 0.9;
			}
			.op_box{
				display: flex;
				width: 300rpx;
				padding: 0 30rpx;
				.bianji,.change_img{
					text-align: center;
					font-size: 20rpx;
					width: 100rpx;
					padding: 10rpx;
					border-radius: 15rpx;
					background-color: #C8C7CC;
					opacity: 0.9;
				}
				.change_img{
					margin-left: 20rpx;
				}
			}
			
		}
	}
	.info{
		position: absolute;
		top: 400rpx;
		background-color: #FFFFFF;
		width: 100%;
		height: calc(100vh - 480rpx);
		border-radius: 20rpx 20rpx 0 0;
		.nav{
			display: flex;
			justify-content: space-around;
			padding: 15rpx 0;
			font-size: 30rpx;
			border-bottom: 1rpx solid #d9d9d9;
		}
		.active_nav{
			padding-bottom: 10rpx;
			border-bottom: 5rpx solid #FF5A5F;
			color: #FF5A5F;
		}
		.user_listen{
			padding: 0 20rpx;
			margin-top: 20rpx;
			image{
				width: 80rpx;
				height: 80rpx;
				border-radius: 10rpx;
			}
			.listen,.star_listen{
				margin-top: 20rpx;
				display: flex;
				font-size: 15rpx;
				color: #999999;
				align-items: center;
			}
		}
		.paly_info{
			margin-top: 50rpx;
			padding: 0 20rpx;
			.title{
				color: #999999;
				font-size: 25rpx;
			}
			.title_style{
				color: #999999;
				font-size: 25rpx;
				margin-left: 15rpx;
			}
		}
	}
</style>
